﻿@{
    ViewBag.Title = "Index";
   
}

<header>
    <link href="../Content/bootstrap.css" rel="stylesheet">
    <script src="../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="../Scripts/bootstrap.min.js" type="text/javascript"></script>
    <style type="text/css">
        /* Override some defaults */
        html, body {
            background-color: #eee;
        }

        body {
            padding-top: 40px;
        }

        .container {
            width: 300px;
           
        }
      #upload-form-ID  h2 {
display: block;
font-size: 1.5em;
-webkit-margin-before: 0.83em;
-webkit-margin-after: 0.83em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
        #uploadID h2 {

            color: #0088cc;
        }
        #searchID h2 {
            color:#47a447;
        }


            /* The white background content wrapper */
            .container > .content {
                background-color: #fff;
                padding: 20px;
                margin: 0 -40px;
                -webkit-border-radius: 10px 10px 10px 10px;
                -moz-border-radius: 10px 10px 10px 10px;
                border-radius: 10px 10px 10px 10px;
                -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
                -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
                box-shadow: 0 1px 2px rgba(0,0,0,.15);
              
            }

        .form {
            margin-left: 65px;
        }

        legend {
            margin-right: -50px;
            font-weight: bold;
            color: #404040;
        }
        .result_dyn {
            float: left;
             background-color: #fff;
            padding: 20px;
            -webkit-border-radius: 10px 10px 10px 10px;
            -moz-border-radius: 10px 10px 10px 10px;
            border-radius: 10px 10px 10px 10px;
            -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
            -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
            box-shadow: 0 1px 2px rgba(0,0,0,.15);
            margin-left:150px;
            margin-top:17px;
        }
    </style>
    <script>

        $(document).ready(function () {

            
            //variables
            //*********
            
            var showHidetime = 300;


            //uploadForm 
            //**********
            var oprBtn = $('#opr-btn-id');
            var uploadDIV = $('#uploadID');
            var btnUpload = $('#btn-upload-ID');
            var btnSend = $('#btnSend-ID');
            var btnCancelUpload = $('#btnCancelUpload-ID')
            var uploadForm = $('#upload-form-ID');

            uploadDIV.hide(showHidetime);

            btnUpload.click(function () {
                  $('#label').text("Choisir un CV en format pdf");
                
                 searchDIV.hide(showHidetime);
                 uploadDIV.show(showHidetime);
                 return false;
             });

             btnCancelUpload.click(function () {
               
                 uploadDIV.hide(showHidetime);
                  return false;
             });
             btnSend.click(function () {
                 var formData = new FormData(document.forms.namedItem("upload-form-nm"));
                 $.ajax({
                     type: "POST",
                     url: "/Operation/Upload",
                     data: formData,
                     contentType: false,
                     processData: false,  
                     enctype: "multipart/form-data",
                     success: function (jsonResult) {
                        
                     }


                 });
                 $(":file").val("");
                 $('textarea[name="keywords"]').val("");
                 uploadDIV.hide(showHidetime);
                 return false;
             }); //end of uploadForm

            

           

            //searchForm 
            /**************/
             var searchDIV = $('#searchID');
             var btnFound = $('#btn-found-ID');
             var btnSearch = $('#btnSearch-ID')
            
             var btnCancelSearch = $('#btnCancelSearch-ID')
             var searchForm = $('#search-form-ID')
                
             searchDIV.hide(showHidetime);

             btnFound.click(function () {
                 
                 $('#result').html("");
                 $('#result_dyn_id').attr("class", "");
                 
                 uploadDIV.hide(showHidetime);
                 searchDIV.show(showHidetime);
                  return false;

             });

             btnCancelSearch.click(function () {

               
                 searchDIV.hide(showHidetime);
                  return false;
             });

             btnSearch.click(function () {
          
                 $.ajax({
                     type: "POST",
                     url: "/Operation/Search",
                     data: searchForm.serialize(),
                     success: function (jsonResult) {

                         if (jsonResult != null) {
                             $('#result').append("<div class='result_dyn' id=result_dyn_id>   </div>")

                             var arrJson = JSON.parse(jsonResult);
                             for (var i = 0 ; i < arrJson.length; i++) {
                                 var user = arrJson[i];

                                 var href = "/Operation/LoadFile/?id=" + user.Id;
                                 $('#result_dyn_id').append("<a href='" + href + "' onclick()><img src='/Content/images/cv.png'/></a>")

                                 $('#result_dyn_id').append("<a href='" + href + "' id='result_load_id' name='" + user.Id + "'>CV de " + user.Firstname + " " + user.Lastname + "</a></br>")
                             }
                         }
                         else {
                             $('#result').append("<div class='result_dyn' id=result_dyn_id>   </div>");
                             $('#result_dyn_id').append("<h3>Aucun resultat n'est trouvé</h3>")
                         }
                     }


                 });
                 $('textarea[name="keywords"]').val(""); 
                 searchDIV.hide(showHidetime);
                 return false;
             });//end of searchForm 
            


            //download file 
             $('#result_load_id').click(function () {
                 var id = $('#result_load_id').attr('name');
                 var url = "/Operation/LoadFile/?id="+id; 
                 document.location.href = url;
                 return false;
             });
           
             $('#label').click(function () {
                 $('#inputFile').trigger('click'); 
                
             });

             $('#inputFile').change(function () {
                
                 $('#label').text($(":file").val());
                 
             });
        }); // end ready


    </script>
</header>
<body>
   
    <div id="result" >
        
    </div>
     
    <div class="container" >
        <div>
            <lable style = "margin-left:-30px">Bonjour @ViewData["name"] </lable>
            <a href="/Home/Login" id="#"> [Se déconneter]</a>
        </div>
        <!-- operations  -->
        <div class="content" >
           
            <div class="form">
                @*<div class="row">*@
                <div >
                    <div id="opr-btn-id" class="operationsForm" >
                        <button id="btn-upload-ID" class="btn btn-primary">Ajouter un CV</button>
                        <button id="btn-found-ID" class="btn btn-success">Trouver un CV</button>
                    </div>
                </div>
            </div>
        </div>


        <!-- upload  -->
        <br />

        <div id="uploadID" class="content" hidden="hidden">
            <div  class="form">

                <h2>Ajouter un CV</h2>
                
                <form id="upload-form-ID" name="upload-form-nm">

                    <fieldset>

                        <div class="clearfix" style="background-color:rgb(0,123,204); border-radius: 5px 5px 5px 5px;margin-right:50px">
                            <label id="label" style="cursor:pointer; color:white; text-align:center;vertical-align:auto; margin-top:5px" >Choisir un CV en format pdf</label>
                            <input id="inputFile" type="file" placeholder="file" name="file" accept="application/pdf" hidden>
                            
                        </div>
                        <br/>
                        <lable><b>Mots de 3 lettres minimum separés</b> </lable></br>
                        <lable><b> par ";" </b></lable>
                        <div class="clearfix">
                            <textarea cols="40" rows="5" placeholder="Mots clés qui décrivent ton CV" name="keywords"></textarea>
                        </div>
                        
                        <button id="btnSend-ID" class="btn btn-primary">Envoyer</button>
                        <button id="btnCancelUpload-ID" class="btn btn-warning" style="float: right; margin-right: 55px">Retourner</button>
                    </fieldset>
                </form>

            </div>
        </div>




        <!-- search  -->
       

        <div id="searchID" class="content" hidden="hidden">

            <div  class="form">
                <h2>Trouver un CV</h2>
                <form id="search-form-ID">
                    <fieldset>
                        <div class="clearfix">
                            <select class="span2" name="engineering">
                                <option>Génie civil</option>
                                <option>Génie informatique</option>
                                <option>Génie logiciel</option>
                                <option>Génie mécanique</option>
                            </select>
                        </div>
                          <br/>
                        <lable><b>Mots de 3 lettres minimum separés</b></lable></br>
                        <lable><b> par ";" </b></lable>
                        <div class="clearfix">
                            <textarea rows="4" placeholder="Mots clés qui décrivent ta recherche" name="keywords"></textarea>
                        </div>
                        
                        <button id="btnSearch-ID" class="btn btn-success">Chercher</button>
                        <button id="btnCancelSearch-ID" class="btn btn-warning" style="float: right; margin-right: 55px">Retourner</button>
                    </fieldset>
                </form>
            </div>
        </div>


    </div>
    <!-- /container -->

</body>
